<template>
	<view>
		<picker
		 class="picker"
		 :class="labelPosition == 'left' ? 'no-border' : 'border'"
		  @change="changeIndex"  
		 :range-key="keyName" 
		 :value="selIndex" 
		 :range="pickerList">
		 <view v-if="labelPosition == 'left'" class="arrow">></view>
		 <view v-if="selIndex === null" class="text">请选择</view>
		 <view v-else class="text">{{pickerList[selIndex][keyName]}}</view>
		 </picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			pickerList:[],
			selIndex:null,
		};
	},
	props: {
		list: {
			type: Array,
			default: () => []
		},
		keyName:{
			type: String,
			default: 'name'
		},
		idName:{
			type: String,
			default: 'id'
		},
		name:{
			type: String,
			default: ''
		},
		listName:{
			type: String,
			default: ''
		},
		form:{
			type: Object,
			default: ()=>{}
		},
		labelPosition:{
			type: String,
			default: ''
		}
	},
	mounted() {
		this.pickerList  = this.$store.state[this.listName] || this.list || [];
	},
	methods: {
			changeIndex (e){
				const _idx=  e.detail.value;
				this.selIndex = _idx;
				this.form.setValue(this.name,this.pickerList[_idx][this.idName])
			}
	}
};
</script>

<style lang="scss" scoped>
	.picker{
		position:relative;
		width: 100%;
		height:72rpx;
	}
	.arrow{
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.border{
		border-radius: 8rpx;
		border: 1rpx solid #e9e9e9;
	}

	.text{
		height:100%;
		padding:20rpx;
		font-size:$font-size-14;
	}
</style>
